การกำหนดขนาดแทร็กใน CSS Grid: การควบคุมแบบ Intrinsic และ Extrinsic อย่างเชี่ยวชาญ

CSS Grid Layout เป็นเครื่องมือที่ทรงพลังสำหรับการสร้างเว็บเลย์เอาต์ที่ซับซ้อนและตอบสนองได้ดี จุดแข็งที่สำคัญอย่างหนึ่งของมันอยู่ที่ความสามารถในการกำหนดขนาดแทร็กที่ยืดหยุ่น ซึ่งช่วยให้คุณควบคุมขนาดของแถวและคอลัมน์ได้อย่างแม่นยำ การทำความเข้าใจเกี่ยวกับคีย์เวิร์ดและฟังก์ชันต่างๆ ในการกำหนดขนาดแทร็กเป็นสิ่งสำคัญสำหรับการสร้างเลย์เอาต์ที่ปรับเปลี่ยนได้และดูแลรักษาง่าย บทความนี้จะเจาะลึกแนวคิดขั้นสูงของการกำหนดขนาดแบบ intrinsic และ extrinsic ใน CSS Grid และสำรวจว่าสิ่งเหล่านี้ช่วยให้คุณสร้างเลย์เอาต์ที่ปรับตัวเข้ากับเนื้อหาและขนาดหน้าจอที่หลากหลายได้อย่างสวยงามได้อย่างไร

ทำความเข้าใจเกี่ยวกับ Grid Tracks และการกำหนดขนาด

ก่อนที่จะลงลึกในรายละเอียดของการกำหนดขนาดแบบ intrinsic และ extrinsic เรามาทบทวนแนวคิดพื้นฐานของ CSS Grid tracks กันก่อน

Grid Tracks คืออะไร?

Grid tracks คือแถวและคอลัมน์ของ grid layout มันเป็นตัวกำหนดโครงสร้างที่จะวาง grid items ลงไป ขนาดของแทร็กเหล่านี้ส่งผลโดยตรงต่อเลย์เอาต์โดยรวมและวิธีการกระจายเนื้อหาภายในกริด

การระบุขนาดแทร็ก

คุณสามารถกำหนดขนาดแทร็กได้โดยใช้คุณสมบัติ grid-template-rows และ grid-template-columns คุณสมบัติเหล่านี้รับค่ารายการที่คั่นด้วยช่องว่าง โดยแต่ละค่าจะแทนขนาดของแทร็กที่สอดคล้องกัน ตัวอย่างเช่น:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
}

            

              
                Copy
              
            
          

โค้ดนี้สร้างกริดที่มีสามคอลัมน์และสองแถว คอลัมน์แรกและคอลัมน์ที่สามแต่ละคอลัมน์ใช้พื้นที่ 1 ส่วน (fr) ของพื้นที่ว่าง ในขณะที่คอลัมน์ที่สองใช้พื้นที่ 2 ส่วน แถวจะถูกกำหนดขนาดโดยอัตโนมัติตามเนื้อหาของมัน

การกำหนดขนาดแบบ Intrinsic และ Extrinsic

หัวใจสำคัญของการกำหนดขนาดแทร็กในกริดขั้นสูงอยู่ที่ความเข้าใจในความแตกต่างระหว่างการกำหนดขนาดแบบ intrinsic และ extrinsic แนวคิดเหล่านี้เป็นตัวกำหนดว่าขนาดของแทร็กจะถูกตัดสินอย่างไรโดยขึ้นอยู่กับเนื้อหาและพื้นที่ว่างที่มี

Intrinsic Sizing: กำหนดขนาดตามเนื้อหา

Intrinsic sizing หมายถึงขนาดของ grid track จะถูกกำหนดโดยเนื้อหาภายใน grid items ที่อยู่ในแทร็กนั้นๆ แทร็กจะขยายหรือหดตัวเพื่อรองรับเนื้อหา ภายใต้ข้อจำกัดบางอย่าง คีย์เวิร์ดสำหรับ intrinsic sizing ประกอบด้วย:

• auto: ค่าเริ่มต้น ขนาดของแทร็กจะถูกกำหนดโดยขนาดขั้นต่ำที่ใหญ่ที่สุดของ grid items ในแทร็ก ในกรณีส่วนใหญ่ นี่หมายความว่าแทร็กจะมีขนาดใหญ่พอที่จะพอดีกับเนื้อหาทั้งหมดโดยไม่ล้น แต่ก็อาจได้รับผลกระทบจากค่า min-width/min-height ที่ตั้งไว้บน grid items ได้
• min-content: แทร็กจะถูกกำหนดขนาดให้พอดีกับพื้นที่น้อยที่สุดที่เนื้อหาต้องการโดยไม่ล้นออกมา ตัวอย่างเช่น ข้อความจะตัดคำ ณ จุดที่เล็กที่สุดเท่าที่จะเป็นไปได้ แม้ว่าจะทำให้การตัดคำดูไม่สวยงามก็ตาม
• max-content: แทร็กจะถูกกำหนดขนาดให้พอดีกับพื้นที่มากที่สุดที่เนื้อหาต้องการโดยไม่ล้นออกมา สำหรับข้อความ นี่หมายความว่ามันจะพยายามหลีกเลี่ยงการตัดคำให้มากที่สุดเท่าที่จะทำได้ ซึ่งอาจส่งผลให้แทร็กกว้างหรือสูงมาก
• fit-content(length): แทร็กจะถูกกำหนดขนาดตามค่าที่น้อยกว่าระหว่าง max-content และ length ที่ระบุ ซึ่งช่วยให้คุณสามารถกำหนดขนาดสูงสุดสำหรับแทร็กได้ในขณะที่ยังคงอนุญาตให้มันหดตัวตามเนื้อหาได้

ตัวอย่าง: Intrinsic Sizing ด้วย min-content และ max-content

ลองพิจารณาสถานการณ์ที่มีสองคอลัมน์ คอลัมน์แรกถูกกำหนดขนาดด้วย min-content และคอลัมน์ที่สองด้วย max-content หากเนื้อหาในคอลัมน์แรกเป็นคำยาวๆ มันจะถูกตัดแบ่ง ณ จุดที่เป็นไปได้ทั้งหมดเพื่อให้พอดีกับขนาดเนื้อหาขั้นต่ำ อย่างไรก็ตาม คอลัมน์ที่สองจะขยายออกเพื่อรองรับเนื้อหาโดยไม่มีการตัดคำ

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
  grid-gap: 10px;
}

.item1 {
  grid-column: 1;
}

.item2 {
  grid-column: 2;
}

            

              
                Copy
              
            
          

            <div class="grid-container">
  <div class="item1">Supercalifragilisticexpialidocious</div>
  <div class="item2">Short text</div>
</div>

            

              
                Copy
              
            
          

ในตัวอย่างนี้ คำว่า "Supercalifragilisticexpialidocious" จะถูกตัดแบ่งเป็นหลายบรรทัดในคอลัมน์แรก ในขณะที่ "Short text" จะยังคงอยู่บนบรรทัดเดียวในคอลัมน์ที่สอง นี่แสดงให้เห็นว่า intrinsic sizing ปรับตัวเข้ากับความต้องการขนาดโดยธรรมชาติของเนื้อหาอย่างไร

ตัวอย่าง: Intrinsic Sizing ด้วย fit-content()

ฟังก์ชัน `fit-content()` มีประโยชน์เมื่อคุณต้องการให้แทร็กมีขนาดตามเนื้อหา แต่ก็มีขีดจำกัดขนาดสูงสุดด้วย ซึ่งสามารถใช้เพื่อป้องกันไม่ให้คอลัมน์หรือแถวมีขนาดใหญ่เกินไป ในขณะที่ยังคงอนุญาตให้มันหดตัวได้หากเนื้อหามีขนาดเล็กกว่า

            .grid-container {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr;
    grid-gap: 10px;
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ คอลัมน์แรกจะขยายให้พอดีกับเนื้อหา แต่จะมีความกว้างไม่เกิน 200px ส่วนคอลัมน์ที่สองจะใช้พื้นที่ที่เหลืออยู่ ซึ่งมีประโยชน์สำหรับการสร้างเลย์เอาต์ที่คุณต้องการให้คอลัมน์มีความยืดหยุ่น แต่ไม่ใช้พื้นที่มากเกินไป

Extrinsic Sizing: กำหนดขนาดตามพื้นที่

ในทางกลับกัน Extrinsic sizing หมายถึงขนาดของ grid track ถูกกำหนดโดยปัจจัยภายนอกเนื้อหา เช่น พื้นที่ว่างใน grid container หรือค่าขนาดที่กำหนดไว้ตายตัว คีย์เวิร์ดสำหรับ extrinsic sizing ประกอบด้วย:

• length: ค่าความยาวคงที่ (เช่น 100px, 2em, 50vh) แทร็กจะมีขนาดเท่านี้พอดีโดยไม่คำนึงถึงเนื้อหา
• percentage: เปอร์เซ็นต์ของขนาด grid container (เช่น 50%) แทร็กจะใช้พื้นที่ตามเปอร์เซ็นต์ที่กำหนดของพื้นที่ว่าง
• fr (หน่วยเศษส่วน): แทนเศษส่วนของพื้นที่ว่างใน grid container หลังจากที่แทร็กอื่นๆ ถูกกำหนดขนาดแล้ว นี่เป็นวิธีที่ยืดหยุ่นที่สุดในการกระจายพื้นที่ระหว่างแทร็ก

ตัวอย่าง: Extrinsic Sizing ด้วยหน่วย fr

หน่วย fr มีค่าอย่างยิ่งในการสร้างเลย์เอาต์ที่ตอบสนองซึ่งปรับตามขนาดหน้าจอที่แตกต่างกัน ด้วยการกำหนดหน่วยเศษส่วนให้กับแทร็ก คุณจะมั่นใจได้ว่าพวกมันจะแบ่งปันพื้นที่ว่างตามสัดส่วน

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ grid container มีสองคอลัมน์ คอลัมน์แรกใช้พื้นที่ 1 ส่วนของพื้นที่ว่าง ในขณะที่คอลัมน์ที่สองใช้พื้นที่ 2 ส่วน หาก grid container กว้าง 600px คอลัมน์แรกจะกว้าง 200px และคอลัมน์ที่สองจะกว้าง 400px (หักลบด้วย grid gap) สิ่งนี้ทำให้มั่นใจได้ว่าคอลัมน์จะรักษาสัดส่วนของมันเสมอ ไม่ว่าขนาดหน้าจอจะเป็นอย่างไร

ตัวอย่าง: Extrinsic Sizing ด้วยเปอร์เซ็นต์และความยาวคงที่

            .grid-container {
  display: grid;
  grid-template-columns: 200px 50% 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ คอลัมน์แรกถูกกำหนดความกว้างคงที่ที่ `200px` คอลัมน์ที่สองจะใช้พื้นที่ 50% ของความกว้างของ grid container และสุดท้าย คอลัมน์ที่สามใช้หน่วย `1fr` ดังนั้นมันจะใช้พื้นที่ที่เหลืออยู่หลังจากที่สองคอลัมน์แรกถูกกำหนดขนาดแล้ว

การผสมผสาน Intrinsic และ Extrinsic Sizing: minmax()

ฟังก์ชัน minmax() ช่วยให้คุณสามารถรวมการกำหนดขนาดแบบ intrinsic และ extrinsic เข้าด้วยกัน ทำให้สามารถควบคุมขนาดแทร็กได้ดียิ่งขึ้น มันกำหนดช่วงของขนาดที่ยอมรับได้สำหรับแทร็ก โดยระบุทั้งค่าต่ำสุดและค่าสูงสุด

            minmax(min, max)
            

              
                Copy
              
            
          

• min: ขนาดต่ำสุดของแทร็ก ซึ่งสามารถเป็นค่าการกำหนดขนาดแทร็กที่ถูกต้องใดๆ ก็ได้ รวมถึงคีย์เวิร์ด intrinsic (auto, min-content, max-content) หรือค่า extrinsic (length, percentage, fr)
• max: ขนาดสูงสุดของแทร็ก ซึ่งสามารถเป็นค่าการกำหนดขนาดแทร็กที่ถูกต้องใดๆ ก็ได้เช่นกัน หาก `max` มีค่าน้อยกว่า `min` ค่า `max` จะถูกละเว้นและจะใช้ค่า `min` แทน

ตัวอย่าง: การใช้ minmax() สำหรับคอลัมน์ที่ตอบสนองได้

กรณีการใช้งานทั่วไปสำหรับ minmax() คือการสร้างคอลัมน์ที่ตอบสนองซึ่งมีความกว้างขั้นต่ำ แต่สามารถขยายเพื่อเติมเต็มพื้นที่ว่างได้

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

ในที่นี้ repeat(auto-fit, minmax(200px, 1fr)) จะสร้างคอลัมน์ให้ได้มากที่สุดเท่าที่จะเป็นไปได้ โดยแต่ละคอลัมน์มีความกว้างอย่างน้อย 200px แต่สามารถขยายเพื่อเติมเต็มพื้นที่ที่เหลือได้ คีย์เวิร์ด auto-fit ช่วยให้แน่ใจว่าคอลัมน์ที่ว่างเปล่าจะถูกยุบลง ทำให้ได้เลย์เอาต์ที่ยืดหยุ่นและตอบสนองได้ดี

ตัวอย่าง: การผสมผสาน minmax() กับ intrinsic sizing

            .grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ คอลัมน์แรกจะมีความกว้างอย่างน้อยเท่ากับขนาดเนื้อหาขั้นต่ำ แต่จะไม่เกิน `300px` ส่วนคอลัมน์ที่สองจะใช้พื้นที่ที่เหลืออยู่

การประยุกต์ใช้งานจริงและแนวทางปฏิบัติที่ดีที่สุด

การทำความเข้าใจการกำหนดขนาดแบบ intrinsic และ extrinsic เป็นสิ่งสำคัญสำหรับการสร้างเลย์เอาต์ที่แข็งแกร่งและปรับเปลี่ยนได้ นี่คือการประยุกต์ใช้งานจริงและแนวทางปฏิบัติที่ดีที่สุดที่ควรคำนึงถึง:

• เมนูนำทางที่ตอบสนอง: ใช้ minmax() เพื่อสร้างรายการเมนูนำทางที่มีความกว้างขั้นต่ำ แต่สามารถขยายเพื่อเติมเต็มพื้นที่ว่างในแถบเมนูได้
• เลย์เอาต์การ์ดที่ยืดหยุ่น: ใช้ repeat(auto-fit, minmax()) เพื่อสร้างเลย์เอาต์การ์ดที่ปรับตามขนาดหน้าจอต่างๆ โดยอัตโนมัติ ทำให้มั่นใจได้ว่าการ์ดจะตัดขึ้นบรรทัดใหม่อย่างสวยงามบนหน้าจอขนาดเล็ก
• แถบด้านข้างที่ปรับตามเนื้อหา: ใช้ min-content หรือ max-content เพื่อกำหนดขนาดแถบด้านข้างตามเนื้อหาของมัน ทำให้สามารถขยายหรือหดตัวได้ตามต้องการ
• หลีกเลี่ยงความกว้างคงที่: ลดการใช้ความกว้างคงที่ (px) และหันมาใช้หน่วยสัมพัทธ์ (%, fr, em) เพื่อสร้างเลย์เอาต์ที่ปรับตามขนาดหน้าจอและความชอบของผู้ใช้ที่แตกต่างกัน
• ทดสอบอย่างละเอียด: ทดสอบเลย์เอาต์กริดของคุณบนอุปกรณ์และขนาดหน้าจอต่างๆ เสมอ เพื่อให้แน่ใจว่ามันแสดงผลอย่างถูกต้องและมอบประสบการณ์ผู้ใช้ที่สอดคล้องกัน

เทคนิคการกำหนดขนาดกริดขั้นสูง

นอกเหนือจากคีย์เวิร์ดและฟังก์ชันพื้นฐานแล้ว CSS Grid ยังมีเทคนิคขั้นสูงเพิ่มเติมสำหรับการปรับแต่งขนาดแทร็กอย่างละเอียด

ฟังก์ชัน repeat()

ฟังก์ชัน repeat() ทำให้การสร้างแทร็กหลายๆ แทร็กที่มีขนาดเท่ากันง่ายขึ้น มันรับอาร์กิวเมนต์สองตัว: จำนวนครั้งที่จะทำซ้ำและขนาดของแทร็ก

            repeat(number, track-size)
            

              
                Copy
              
            
          

ตัวอย่างเช่น:

            grid-template-columns: repeat(3, 1fr);
            

              
                Copy
              
            
          

ซึ่งเทียบเท่ากับ:

            grid-template-columns: 1fr 1fr 1fr;
            

              
                Copy
              
            
          

ฟังก์ชัน repeat() ยังสามารถใช้ร่วมกับคีย์เวิร์ด auto-fit และ auto-fill เพื่อสร้างเลย์เอาต์กริดที่ตอบสนองซึ่งปรับตามพื้นที่ว่างโดยอัตโนมัติ

คีย์เวิร์ด auto-fit และ auto-fill

คีย์เวิร์ดเหล่านี้ใช้กับฟังก์ชัน repeat() เพื่อสร้างกริดที่ตอบสนองซึ่งปรับตามจำนวนรายการในกริดและพื้นที่ว่าง ความแตกต่างที่สำคัญระหว่างสองคำนี้อยู่ที่วิธีการจัดการกับแทร็กที่ว่างเปล่า

• auto-fit: หากแทร็กทั้งหมดว่างเปล่า แทร็กจะยุบลงเหลือความกว้าง 0
• auto-fill: หากแทร็กทั้งหมดว่างเปล่า แทร็กจะยังคงขนาดของมันไว้

ตัวอย่าง: การใช้ auto-fit สำหรับคอลัมน์ที่ตอบสนองได้

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ กริดจะสร้างคอลัมน์ให้ได้มากที่สุดเท่าที่จะเป็นไปได้ โดยแต่ละคอลัมน์มีความกว้างอย่างน้อย 200px แต่สามารถขยายเพื่อเติมเต็มพื้นที่ที่เหลือได้ หากมีรายการไม่เพียงพอที่จะเติมทุกคอลัมน์ คอลัมน์ที่ว่างเปล่าจะยุบลงเหลือความกว้าง 0

ข้อควรพิจารณาสำหรับการทำให้เป็นสากล (i18n) และการปรับให้เข้ากับท้องถิ่น (l10n)

เมื่อออกแบบเลย์เอาต์สำหรับผู้ชมทั่วโลก สิ่งสำคัญคือต้องพิจารณาถึงผลกระทบของภาษาและทิศทางการเขียนที่แตกต่างกัน ความยาวของข้อความอาจแตกต่างกันอย่างมากระหว่างภาษา ซึ่งอาจส่งผลกระทบต่อเลย์เอาต์หากขนาดของแทร็กไม่ได้ถูกกำหนดค่าไว้อย่างเหมาะสม นี่คือเคล็ดลับบางประการสำหรับการออกแบบเลย์เอาต์ที่เป็นสากล:

• ใช้หน่วยสัมพัทธ์: ควรใช้หน่วยสัมพัทธ์ เช่น em, rem, และเปอร์เซ็นต์ แทนหน่วยคงที่อย่างพิกเซล เพื่อให้ข้อความสามารถปรับขนาดได้ตามการตั้งค่าขนาดตัวอักษรของผู้ใช้
• Intrinsic Sizing: ใช้คีย์เวิร์ดการกำหนดขนาดแบบ intrinsic เช่น min-content, max-content, และ fit-content() เพื่อให้แน่ใจว่าแทร็กจะปรับตามขนาดของเนื้อหา ไม่ว่าจะอยู่ในภาษาใด
• คุณสมบัติตามตรรกะ (Logical Properties): ใช้คุณสมบัติตามตรรกะ เช่น inline-start และ inline-end แทนคุณสมบัติทางกายภาพ เช่น left และ right เพื่อรองรับทั้งภาษาที่เขียนจากซ้ายไปขวา (LTR) และจากขวาไปซ้าย (RTL)
• การทดสอบ: ทดสอบเลย์เอาต์ของคุณกับภาษาและทิศทางการเขียนที่แตกต่างกัน เพื่อระบุและแก้ไขปัญหาที่อาจเกิดขึ้น ลองจำลองสตริงที่ยาวขึ้น ซึ่งอาจพบได้ในภาษาต่างๆ

บทสรุป

การกำหนดขนาดแทร็กใน CSS Grid เป็นเครื่องมือที่ทรงพลังและหลากหลายสำหรับการสร้างเว็บเลย์เอาต์ที่ตอบสนองและปรับเปลี่ยนได้ ด้วยการทำความเข้าใจแนวคิดของการกำหนดขนาดแบบ intrinsic และ extrinsic, การเข้าใจฟังก์ชัน minmax(), และการใช้ประโยชน์จากฟังก์ชัน repeat() คุณจะสามารถสร้างเลย์เอาต์ที่ปรับตัวเข้ากับเนื้อหาและขนาดหน้าจอที่หลากหลายได้อย่างสวยงาม อย่าลืมพิจารณาถึงผลกระทบของการทำให้เป็นสากลและการปรับให้เข้ากับท้องถิ่นเมื่อออกแบบสำหรับผู้ชมทั่วโลก

ทดลองใช้เทคนิคการกำหนดขนาดแทร็กต่างๆ และสำรวจความเป็นไปได้ที่ไม่สิ้นสุดของ CSS Grid ด้วยการฝึกฝนและความเข้าใจที่มั่นคงในแนวคิดเหล่านี้ คุณจะพร้อมที่จะสร้างเว็บเลย์เอาต์ที่ซับซ้อนและเป็นมิตรกับผู้ใช้สำหรับทุกโครงการ